<template>
  <div>
    <v-toolbar dense elevation="2">
      <div>
        <v-btn icon @click="$router.go(-1)">
          <v-icon small>mdi-arrow-expand-left</v-icon>
        </v-btn>
      </div>
      <v-spacer/>
      <div>
        好好学习,天天向上!!
      </div>
    </v-toolbar>
    <v-main class="py-2">
      <div>
        <v-expansion-panels>
          <v-expansion-panel
          >
            <v-expansion-panel-header>
              <v-row>
                <v-col cols="6">
                  <div>
                    <div>{{business.name}}</div>
                    <v-icon color="orange" small>mdi-star-half-full</v-icon><span style="color: orange;font-size: small">4.5</span>
                    <div style="font-size: small">月销售:{{business.monthlySales}}</div>
                  </div>
                </v-col>
                <v-spacer/>
                <v-col cols="4">
                  <v-img alt="店家图片" :src="business.image" width="70px" height="70px"/>
                </v-col>
              </v-row>
            </v-expansion-panel-header>
            <v-expansion-panel-content>
              <h4>公告</h4>
              <v-divider/>
              {{business.details}}
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-expansion-panels>

        <v-tabs v-model="tabIndex">
          <v-tab>点餐</v-tab>
<!--          <v-tab>评价</v-tab>-->
<!--          <v-tab>商家</v-tab>-->
        </v-tabs>
        <v-tabs-items v-model="tabIndex">
          <v-tab-item>
            <goods-page @addShoppingCart="addShoppingCart" :goods-category-list="business.goodsCategoryList"/>
          </v-tab-item>
<!--          <v-tab-item>-->
<!--            b-->
<!--          </v-tab-item>-->
<!--          <v-tab-item>-->
<!--            c-->
<!--          </v-tab-item>-->
        </v-tabs-items>
      </div>
      <v-bottom-sheet v-model="sheet">
        <v-card
            class="text-center"
            height="300px"
        >
          <v-btn
              class="mt-6"
              outlined
              color="error"
              @click="clearShoppingCart"
          >
            清空购物车
          </v-btn>
          <div class="my-3" style="max-height:200px;overflow: auto">
            <v-list>
              <v-list-item v-for="orderGoods in shoppingCartList" :key="orderGoods.goodsId">
                <v-row>
                  <v-col cols="6">{{orderGoods.goodsName}}</v-col>
                  <v-col cols="3">{{orderGoods.goodsNum}}份</v-col>
                  <v-col cols="3" style="color: crimson">{{orderGoods.totalPrice}}</v-col>
                </v-row>
              </v-list-item>
            </v-list>
          </div>
        </v-card>
      </v-bottom-sheet>
    </v-main>
    <v-footer app fixed class="pa-0 ma-0">
      <v-card width="100%" class="pa-2">
        <v-row>
          <v-col cols="2">
            <v-icon>mdi-cart-variant</v-icon>
          </v-col>
          <v-col cols="6" @click="sheet=true">金额:￥{{totalPrice}}</v-col>
          <v-col cols="4">
            <v-btn color="success" @click="toPay">去支付</v-btn>
          </v-col>
        </v-row>
      </v-card>
    </v-footer>
  </div>
</template>

<script>
import GoodsPage from "@/views/home/component/GoodsPage";
import {selectBusinessIncludeGoodsById} from "@/http/api/business";
export default {
  name: "BusinessPage",
  components: {GoodsPage},
  data:()=>({
    tabIndex:0,
    business:{},
    sheet:false,
    shoppingCartList:[]
  }),
  computed:{
    businessId(){
      return this.$route.query.id
    },
    totalPrice(){
      let total=0;
      for (let orderGoods of this.shoppingCartList){
        total+=orderGoods.totalPrice
      }
      return total
    }
  },
  created() {
    this.init()
  },
  methods:{
    init(){
      selectBusinessIncludeGoodsById(this.businessId).then(res=>{
        this.business = res.data
      })
    },
    addShoppingCart(orderGoods){
      this.shoppingCartList.push(orderGoods)
    },
    clearShoppingCart(){
      this.sheet = false
      this.shoppingCartList = []
    },
    toPay(){
      if (this.shoppingCartList && this.shoppingCartList.length>0){
        this.$router.push({
          path:'/orderPay',
          query:{
            jsonStr: JSON.stringify(this.shoppingCartList)
          }
        })
      }
    }
  }
}
</script>

<style scoped>

</style>